<template>
  <div>

    <!-- 表单盒子 -->
    <div class='form'>
        <div style="height:300px;background-color: white;overflow-y:auto;">
            <div>
            <p v-for="item in log_list" >
                
              <span v-html='$options.filters.make_text(item)'></span>
                <!-- {{item}} -->
            </p>
            </div>
        </div>
        <div style="border: 1px black solid;width:500px;">
            <textarea v-model="msg" rows="3" placeholder="在此输入文本">
            </textarea>
            <van-button type="primary" size="small"  @click="send" class="send_btn">发送</van-button>
            <van-button type="primary" size="small"  @click="leave_room" class="send_btn">退出</van-button>
        </div>

    </div>
</div>
  
</template>


<script>
export default {
    data(){
        return{
            msg: "",
            log_list:[],
            username:sessionStorage.getItem('username'),
            sid:'',
        }
    },
    filters:{
    make_text(val){
      if(val.indexOf('客服')!= -1){
        return '<span class="centerstr">'+val+'</span>'
      }else if(val.indexOf('我')== -1){
        return '<span class="rightstr">'+val+'</span>'
      }else{
         return '<span>'+val+'</span>'
      }
    }
  },
    sockets:{
        connect: function(){
            console.log('socket 连接成功')
        },
        message: function(val){
            console.log('返回:'+val);
            this.log_list.push(val);
            this.$dialog.alert({
            message: val,
            }).then(res => {
            console.log(res)
            // on close
            });
        },
        sendback: function(val){
            console.log('返回:'+val);
            alert(val);
        }
    },
    methods:{

        send(){
            
            this.sid = this.$socket.id
            if(!this.username){
                this.$socket.emit('message',encodeURI("我："+this.msg));
            }else{
                this.$socket.emit('message',encodeURI(this.username+"："+this.msg));
            }
            this.msg = ''
        },
        leave_room(){
            if(this.sid){
                this.$socket.emit('leave',encodeURI(JSON.stringify({username:'用户',room:this.sid})));
                window.location.reload()
            }
        }
    }
}
</script>

<style>
.form{
    margin:0px auto; 
    margin-top: 130px;
    width: 502px;
    border: 1px black solid;
}
textarea{
    width: 500px;
    border:0;
  	background-color:transparent;
  	color: #666464;
  	height: auto;
}
.send_btn{
    position: relative;
    right: -212px;
}

.centerstr{
  text-align: center;
  
  margin-left: 240px;
}
</style>